<template>
    <div class="app">
        <h1> 前端图形算法与设计模式总结</h1>
        <div class="content">
            <Triangle></Triangle>
            <Circle></Circle>
        </div>
        <div class="transform">
            <Transform></Transform>
        </div>

    </div>
</template>

<script>
    import Triangle from "./components/正三角形/index"
    import Circle from "./components/圆周运动/index"
    import Transform from "./components/Transform动画/index"
    export default {
        name: 'App',
        components: {
            Triangle,
            Circle,
            Transform
        }
    }
</script>

<style>
    .app {
        width: 100%;
        text-align: center;
    }

    .app>h1 {
        margin: auto;
    }

    .content {
        display: flex;
    }

    .content>div {
        display: inline-block;
        margin: 10px;
        background: #fff;
        padding: 15px;
        min-width: 200px;
        box-shadow: 0 3px 5px #ddd;
        color: #555;
    }


    h1 {
        border-bottom: 1px solid #ccc;
    }
</style>